<template>
  <div class="search">
    <mt-header fixed :title="title">
      <mt-button  slot="left" icon="back" @click="$router.back()">返回</mt-button>
      <mt-button slot="right" @click="search=!search">
        <img src="../assets/search.png" height="20" width="20" slot="icon">
      </mt-button>
    </mt-header>
    <mt-search
      v-if="search"
      v-model="q"
      cancel-text="取消"
      placeholder="搜索">
      <mt-cell
        v-for="item in result.results"
        :to="item.url.replace(url,'novels')"
        :title="item.title"
        :key="item.title"
        is-link
        :value="item.author">
      </mt-cell>
    </mt-search>
    <div v-else>
      <mt-cell
        v-for="item in list"
        :to="item.url"
        :title="item.title"
        is-link
        :key="item.title"
        :value="item.author">
      </mt-cell>
      <div class="pages">
        <span class="page" :class="{active:page==o}" @click="loadPage(o)" v-for="o in total">{{o}}</span>

      </div>
    </div>

    <div id="html" style="display: none"></div>
  </div>
</template>
<script>
  import fetch from '../utils/fetch'
  let url  = 'https://acfun.leanapp.cn/novels'
  let parseUrl  = 'https://acfun.leanapp.cn/novels/parse?encoding=gbk&url=http://m.qxs.la/'
  import { Indicator } from 'mint-ui';
  export default {
    data(){
      return {url,q:'',search:false,result:{},list:[],title:'',total:1,page:''}
    },
    watch:{
      q(val){
        if(val!==''){
          Indicator.open('Loading...')
          this.query().then(res=>{
            this.result = res.data;
            Indicator.close();
          })
        }
      },
      '$route' (to, from) {
        console.log(to)
      }
    },
    methods:{
      query(){
        return fetch.get(`${url}?q=${this.q}`)
      },
      loadPage(page){
        this.page = page;
        this.list=[];
        this.index();
      },
      index(){
        const page =  this.page||'';
        fetch.get(parseUrl+this.$route.params.tag+'/'+page).then(res=>{
          document.querySelector('#html').innerHTML= res.data.html;
          const elements = document.querySelectorAll('#html .list li');
          const pages = document.querySelectorAll('#html #pagenav a');
          this.total = pages.length;
          const e = document.querySelector('#html .list h3');
          this.title = e.innerHTML;
          elements.forEach(e=>{
            let arr =  e.innerText.trim().split('/');
            this.list.push({title:arr[0],author:arr[1],url:`novels${e.childNodes[0].attributes['href'].value}`})
          })
          if(page==''){
            this.page=1;
          }
        })
      }
    },
    created(){
      this.index()

    }
  }
</script>
<style scoped>
  .search{
    text-align: left;
    padding-top: 40px;
  }
  .title{
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    line-height: 2;
    text-indent: 0.5em;
  }
  .pages .active{
    color: #fff;
    background: #26a2ff;
    border-color: #26a2ff;
  }
  .pages{
    margin: 10px 0;
    padding-left: 10px;
  }
  .page{
    display: inline-block;
    text-align: center;
    border: thin solid #666666;
    width: 2em;
    height: 2em;
    font-size: .7em;
    line-height: 2em;
    border-radius: 50%;
    margin: 10px 10px 0 0;
  }
</style>
